Custom Integration - Main

Dependencies

• Portal Records

ConfigureDocuments

<script>
    ConfigureDocuments();

    // Async function to configure documents
    async function ConfigureDocuments() {
        var section = "{{ sectionName }}";
        try {
            // Prepare body for fetching SharePoint files
            const body = {
                "SharePoint Site": SharePointSite,
                "Document Library": DocumentLibrary,
                "Folder Path": `sites/${site}${FolderPath}`,
                "Document Entity": documentEntity
            };

            // Fetch SharePoint files based on the provided body
            const getResults = await GetSharePointFiles(body);

            // Check if file retrieval was successful
            if (getResults) {
                // Populate the table with the fetched results
                PopulateTable(getResults, section);
            }
        } catch (error) {
            // Log the error during document configuration
            console.error('Error during document configuration:', error);
            // Handle or log the error as needed
        }
    }
</script>

<div id="{{ sectionName }}" style="" class="contactDocumentLocation" style="display: none;"> 
    <div>
        <h1 style="font-weight:bold;">{{ sectionName }}</h1>
    </div>
    <span id="{{ sectionName }} details"></span>

    <script>
        // Assuming you have a variable called sectionName
        var sectionName = '{{ sectionName }}';
        var enableDeletion = '{{ EnableDeletion }}';
        var enableCollaboration = '{{ EnableCollaboration }}';
        var serviceLine = '{{ serviceLine }}';
        var contact = '{{ contact }}';
    
        // Add attributes to the <span> element
        $(`span[id='${sectionName} details']`).data('sharepointsite', SharePointSite);
        $(`span[id='${sectionName} details']`).data('documentlibrary', DocumentLibrary);
        $(`span[id='${sectionName} details']`).data('relativepath', RelativePath);
        $(`span[id='${sectionName} details']`).data('site', site);
        $(`span[id='${sectionName} details']`).data('currentfolder', currentFolder);
        $(`span[id='${sectionName} details']`).data('rootfolder', rootFolder);
        $(`span[id='${sectionName} details']`).data('documententity', documentEntity);
        $(`span[id='${sectionName} details']`).data('folderpath', FolderPath);
        $(`span[id='${sectionName} details']`).data('enabledeletion', enableDeletion);
        $(`span[id='${sectionName} details']`).data('enablecollaboration', enableCollaboration);
        $(`span[id='${sectionName} details']`).data('serviceline', serviceLine);
        $(`span[id='${sectionName} details']`).data('contact', contact);

    </script>

    <div class="view-toolbar grid-actions clearfix">
        <div class="pull-left">
            <ol id="documentsBreadcrumb" class="breadcrumb sharepoint-breadcrumbs" style="">
            </ol>
        </div>
        {% if EnableUpload %}
            <div class="pull-right">
                <a class="add-file btn btn-primary action" href="#" role="button" onclick="openModal('UploadModal', '{{ sectionName }}')">
                    <span class="fa fa-plus-circle" aria-hidden="true"></span>
                    Add Files
                </a>
                <a class="add-folder btn btn-info action" href="#" role="button" onclick="openModal('NewFolderModal', '{{ sectionName }}')">
                    <span class="fa fa-folder" aria-hidden="true"></span>
                    New Folder
                </a>
                <a class="add-folder btn btn-info action" href="#" role="button" onclick="resyncDocuments('{{ sectionName }}')">
                    <span class="fa fa-refresh" aria-hidden="true"></span>
                    Refresh
                </a>
            </div>
        {% endif %}
    </div>   
    <div class="view-grid">
        <table id="{{ sectionName }}" aria-relevant="additions" role="grid" class="table table-fluid">
            <thead>
                <tr>
                    <th scope="col" onclick='sortTable(0, "{{ sectionName }}")' aria-readonly="true" style="width:40%;text-align: left;" class="sort-enabled"><a role="button" aria-label="Name" tabindex="0">Name</a></th>
                    <!-- <th scope="col" aria-readonly="true" style="width:10%;text-align: center;" class="sort-enabled"><a role="button" aria-label="ID" tabindex="1">ID</a></th> -->
                    <th scope="col" onclick='sortTable(1, "{{ sectionName }}")' aria-readonly="true" style="width:40%;text-align: center;" class="sort-enabled"><a role="button" aria-label="Modified On" tabindex="2">Modified On</a></th>
                    <!-- <th scope="col" onclick='sortTable(3, "{{ sectionName }}")' aria-readonly="true" style="width:20%;text-align: center;" class="sort-enabled"><a role="button" aria-label="Modified By" tabindex="3">Modified By</a></th> -->
                    <th scope="col" aria-readonly="true" style="width:20%;text-align: center;" class="sort-enabled"><a role="button" aria-label="Actions" tabindex="4">Actions</a></th>
                </tr>
            </thead>
            <tbody id="{{ sectionName }}" style="">
            </tbody>
        </table>
        <div id="{{ sectionName }} NoDocuments" style="display:none">
            <div class="sharepoint-empty message" role="presentation" style="" tabindex="0">
                <div class="alert alert-block alert-warning">There are no folders or files to display.</div>
            </div>
        </div>
        <div id="{{ sectionName }} Loading" style="text-align: center;">
            <h4>Loading Documents <span class="fa fa-cog fa-spin" style="display: inline-block !important" aria-hidden="true"></span></h3>
        </div>
    </div>
</div>

sortTable

<script>
    function sortTable(columnIndex, tableName) {
        const table = $('table[id="' + tableName + '"]');
        const heading = table.find('th').eq(columnIndex);
        const arrowUp = '<i class="fa fa-arrow-up fa-md"></i>';
        const arrowDown = '<i class="fa fa-arrow-down fa-md"></i>';
    
        // Remove existing arrow indicators from all headings
        table.find('th').each(function () {
            $(this).find('.arrow-indicator').remove();
        });
    
        // Append arrow indicator to the selected heading
        heading.append(`<span class="arrow-indicator">${ascendingOrder ? arrowUp : arrowDown}</span>`);
    
        const rows = Array.from(table[0].rows).slice(1); // Exclude header row
    
        rows.sort((a, b) => {
            const cellA = a.cells[columnIndex].textContent.trim().toLowerCase();
            const cellB = b.cells[columnIndex].textContent.trim().toLowerCase();
    
            if (cellA < cellB) return ascendingOrder ? -1 : 1;
            if (cellA > cellB) return ascendingOrder ? 1 : -1;
            return 0;
        });
    
        // Remove existing rows
        rows.forEach(row => table.find('tbody').append(row));
    
        // Toggle sorting order for the next click
        ascendingOrder = !ascendingOrder;
    }
</script>